<%@ page language="java" contentType="text/html; charset=UTF-8"  pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib uri="http://java.sun.com/jstl/fmt_rt" prefix="fmt" %>
	
	<script type="text/javascript">
	    
	    function searchContentList() {
	        document.getElementById("searchContentForm").submit();
	    }	
	
	    function movePage(pageNo) {
	        document.getElementById("searchContentForm").firstIndex.value=pageNo*${searchContent.rowCountPerPage};
	        searchContentList();
	    }
	    
	    function setRowCountPerPage(rowCount) {
            document.getElementById("searchContentForm").rowCountPerPage.value=rowCount;
            searchContentList();
	    }
	    
	    function showDetailViewArea() {
	    	$("#detailview_area").fadeIn();
	    }
	    
	    //--- show/hide/toggle Detail view area-----------------------------------------------------------------------------------
        function showDetailViewArea() {
            if(!$("#detailview_area").is(':visible')) {
                $("#detailview_area").fadeIn();
                $("#detailViewToggleButton").html("<strong>&gt;</strong>");
            }
	    }
	    
	    function hideDetailViewArea() {
            if($("#detailview_area").is(':visible')) {
                $("#detailview_area").fadeOut();
                $("#detailViewToggleButton").html("<strong>&lt;</strong>");
            }
	    }
	    
	    function toggleDetailViewArea() {
            if($("#detailview_area").is(':visible')) showDetailViewArea();
            else hideDetailViewArea();
        }

        //--- get detail Info by ajax -----------------------------------------------------------------------------------
	    var getDetailInfoAjaxOptions = { success : successDetailInfo, error : errorDetailInfo, type:"post", dataType:'html', resetForm:true };
	    
        function errorDetailInfo() {
            
        }

        function successDetailInfo(responseText, statusText) {
        	if(parseInt(responseText.length)>0) {
        		showDetailViewArea();
        		var sBuf = $("#detailview_area").html() + "<br/>";
        	    $("#detailview_area").html(sBuf + responseText);
        	}
        	else {
        		//error
        		alert("Error:Ajax");
        	}
	    }
	    
        function showDetailInfo(contendTypeId, contentId) {
//alert("onclick="+contendTypeId+","+contentId);
//alert("onclick="+contendTypeId+","+document.getElementById("DetailViewAjaxForm").contentTypeId.value);
            document.getElementById("DetailViewAjaxForm").contentTypeId.value = contendTypeId;
            document.getElementById("DetailViewAjaxForm").contentId.value = contentId;
            showDetailViewArea();
        	$("#detailview_area").html("<img src='<c:url value='/${skin}/images/loadingCycle.gif'/>'>");
alert("call ajax");
            $('#DetailViewAjaxForm').ajaxSubmit(getDetailInfoAjaxOptions);
        }
        
	</script>
	
    <form id="DetailViewAjaxForm" name="DetailViewAjaxForm" method="post" action="<c:url value='/content/getContentInfo.do'/>"><!-- DetailViewAjaxForm -->
        <input type="hidden" id="contentTypeId" name="contentTypeId" value=""/>
        <input type="hidden" id="contentId" name="contentId" value=""/>
    </form>
    
	<form  id="searchContentForm" method="post">
        <input id="firstIndex" name="firstIndex" type="hidden" value="${searchContent.firstIndex}">
        <input id="rowCountPerPage" name="rowCountPerPage" type="hidden" value="">
        
	    <!-- Search keyword, filter, sort field -->
	    <div style="text-align:right">
			<input type="text" id="keyword" name="keyword" value="${searchContent.keyword}">&nbsp;
			<select id="sortKey" name="sortKey">
			    <option value="TITLE" <c:if test="${searchContent.sortKey=='TITLE'}">selected</c:if> >제목</option>
			    <option value="LASTCREATE" <c:if test="${searchContent.sortKey=='LASTCREATE'}">selected</c:if> >최근생성</option>
			    <option value="LASTUPDATE" <c:if test="${searchContent.sortKey=='LASTUPDATE'}">selected</c:if> >최근수정</option>
			</select>&nbsp;
			
			<span onclick="searchContentList()" style="cursor:pointer;"> Search </span>
			<span id="detailViewToggleButton" onclick="toggleDetailViewArea()" style="cursor:pointer;">&gt;</span>
			<br/>
		</div>
		<!-- Search Result -->
		<table style="width:100%">
		<tr>
		<td>
		    <table class="guide" style="width:100%">
		       <thead>
					<tr>
			            <th>#</th>
					    <th>contentId,<br/>contentTypeId</th>
					    <th>thumbnailWidth,<br/>thumbnailHeight,<br/>thumbnailStorageId</th>
					    <th>createDate,<br/>lastUpdateDate</th>
					    <th>isDeleted,<br/>isLocked,<br/>isApproved</th>
					    <th>version,<br/>ownerAccountId</th>
					    <th class="rig">title,<br/>description,<br/>tags</th>
					</tr>
	            </thead>
	            <c:if test="${TotalCount>0}">
		            <tbody>            
						<c:set var="idx" value="1"/>
				        <c:forEach var="Content" items="${ContentList}">
							<tr onclick="showDetailInfo('${Content.contentTypeId}',${Content.contentId})">
				                <td><input type='checkbox' id='${Content.contentTypeId}_${Content.contentId}' name='${Content.contentTypeId}_${Content.contentId}'>${idx}</td>
							    <td>${Content.contentId},${Content.contentTypeId}</td>
							    <td>${Content.thumbnailWidth},${Content.thumbnailHeight},${Content.thumbnailStorageId}
							         <c:choose>
							             <c:when test='${not empty Content.thumbnailStorageId}'>
							                 <br/>
							                 <a href="<c:url value='/storage/getObject.do?OT=I&OID='/>${Content.storageId}" >
							                 <img src="<c:url value='/storage/getObject.do?OT=I&OID='/>${Content.thumbnailStorageId}" style="max-width:200px;max-hight:200px" >
							                 </a>
							             </c:when>
							         </c:choose>
							    </td>
							    <td>${Content.createDate}<br/>${Content.lastUpdateDate}</td>
							    <td>${Content.isDeleted},${Content.isLocked},${Content.isApproved}</td>
							    <td>${Content.version},${Content.ownerAccountId}</td>
							    <td class="rig">${Content.title},<br/>${Content.description},<br/>${Content.tags}</td>
							</tr>
							<c:set var="idx" value="${idx+1}"/>
				        </c:forEach>
				        <c:remove var="idx"/>
		            </tbody>
	            </c:if>
		    </table>
        </td>
        <td id="detailview_area" style="width:300px;background:lightgray;display:none">detail view</td>
        </tr>
        </table>
	    <c:if test="${TotalCount==0}"><div style="text-align:center">검색결과가 없습니다.</div></c:if>
	    <%-- Navigating Page --%>
	    <div style="text-align:right;width:100%">
		    <%--${searchContent.totalCount}중 ${searchContent.firstIndex} 부터 ${searchContent.rowCountPerPage}개를 표시함 --%>
		    <c:set var="pageCount" value="${searchContent.totalCount/searchContent.rowCountPerPage}"/>
		    <c:forEach var="idx" begin="0" end="${pageCount}" step="1">
		        <c:choose>
		            <c:when test="${idx==(searchContent.firstIndex/searchContent.rowCountPerPage)}"><strong>${idx+1}</strong></c:when>
		            <c:otherwise><span style="cursor:pointer;" onclick="movePage(${idx});">${idx+1}</span></c:otherwise>
		        </c:choose>
		        <c:if test="${idx<(pageCount-1)}">&nbsp;</c:if>
		    </c:forEach>
		    [${TotalCount}]
		    <c:remove var="pageCount"/>
	    </div>
    </form>
